<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleMini" />
        <q-toolbar-title> Admin Dashboard </q-toolbar-title>
        <div>
          <q-btn flat round dense>
            <q-avatar size="26px">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </q-avatar>
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>个人资料</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup>
                  <q-item-section>退出登录</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      :mini="miniState"
      :width="200"
      :breakpoint="500"
      class="bg-grey-1"
    >
      <div class="column full-height">
        <q-item>
          <q-item-section avatar>
            <q-avatar size="32px">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </q-avatar>
          </q-item-section>
          <q-item-section v-if="!miniState">
            <q-item-label class="text-weight-bold">管理系统</q-item-label>
          </q-item-section>
        </q-item>

        <q-separator />

        <!-- 菜单滚动区 -->
        <q-scroll-area style="flex: 1 1 0; min-height: 0">
          <q-list padding>
            <q-item clickable v-ripple to="/dashboard">
              <q-item-section avatar>
                <q-icon name="dashboard" />
              </q-item-section>
              <q-item-section> 仪表盘 </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/analytics">
              <q-item-section avatar>
                <q-icon name="analytics" />
              </q-item-section>
              <q-item-section> 数据分析 </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/user-manage">
              <q-item-section avatar>
                <q-icon name="people" />
              </q-item-section>
              <q-item-section> 用户管理 </q-item-section>
            </q-item>

            <q-expansion-item icon="settings" label="设置">
              <q-item clickable v-ripple class="q-pl-xl" to="/settings/profile">
                <q-item-section> 个人资料 </q-item-section>
              </q-item>
              <q-item clickable v-ripple class="q-pl-xl" to="/settings/preferences">
                <q-item-section> 偏好设置 </q-item-section>
              </q-item>
            </q-expansion-item>
          </q-list>
        </q-scroll-area>
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const leftDrawerOpen = ref(true); // 桌面端始终显示
const miniState = ref(false); // 默认不mini

function toggleMini() {
  miniState.value = !miniState.value;
}
</script>

<style lang="scss"></style>
